<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useFinanceStore } from '@/stores/module/finance'
const FinanceStore = useFinanceStore() // 创建store实例
const { getMarginalAmoutRate } = storeToRefs(FinanceStore)
</script>
<template>
 
    <card-box >
      <template v-slot:title>
        <h1>
          {{ getMarginalAmoutRate?.title }}
        </h1>
      </template>
      <div class="general-profit" v-if="getMarginalAmoutRate?.info">
        <div class="general-income">
          <img
            src="@/assets/images/FinancialPicture/general-income-icon.png"
            alt=""
          />
          <div>
            <p>{{ getMarginalAmoutRate.info?.money }}</p>
            <p class="money">
              {{ getMarginalAmoutRate.info?.moneyNubem }}
              <span>{{ getMarginalAmoutRate.info?.units }}</span>
            </p>
          </div>
        </div>
        <div class="profit-margin">
          <img
            src="@/assets/images/FinancialPicture/profit-margin-icon.png"
            alt=""
          />
          <div>
            <p>{{ getMarginalAmoutRate.info?.profit }}</p>
            <p class="profit">{{ getMarginalAmoutRate.info?.amountRatio }}</p>
          </div>
        </div>
      </div>
      <div class="default-img" v-else>
        <p>{{ $t('bi_common_nodata') }}</p>
      </div>
    </card-box>

</template>

<style lang="scss" scoped>
.general-profit {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 260px;
  .general-income {
    text-align: center;
    width: 45%;
    img {
      width: 76px;
      height: 83px;
    }
    div {
      height: 103.5px;
      background-color: rgba(3, 22, 73, 0.6);
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        font-size: 12px;
        color: #ffffff;
        margin: 8px 0;
      }
      .money {
        font-size: 20px;
        color: #f18337;
        span {
          font-size: 15px;
        }
      }
    }
  }
  .profit-margin {
    text-align: center;
    width: 45%;
    img {
      width: 76px;
      height: 83px;
    }
    div {
      height: 103.5px;
      background-color: rgba(3, 22, 73, 0.6);
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        font-size: 12px;
        color: #ffffff;
        margin: 8px 0;
      }
      .profit {
        font-size: 20px;
        color: #00a0e9;
      }
    }
  }
}
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
</style>
